<!DOCTYPE html>
<html>

<head>
    <#include "/yq/admin/components/meta.html" />
    <title>蓁奕科技 ${metaTitleSuffix!}</title>
    <#include "/yq/admin/components/stylesheets.html" />
</head>

<body>
    <div id='app'>
        <el-container>
            <#assign menuIndex="5-1" />
            <#include "/yq/admin/components/menu.html" />
            <el-container>
                <#include "/yq/admin/components/header.html" />
                <el-main>
                    <template>
                        <el-form ref="form" :model="form" label-width="120px">
                            <el-form-item label="标题">
                                <el-input v-model="form.title"></el-input>
                            </el-form-item>
                            <el-form-item label="副标题">
                                <el-input v-model="form.subtitle"></el-input>
                            </el-form-item>
                            <el-form-item label="所属模块">
                                <el-select v-model="form.modelId" filterable disabled>
                                    <el-option v-for="item in models" :key="item.id" :label="item.title" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="内容">
                                <el-select v-model="contentType" @change="onContentTypeChanged">
                                    <el-option label="商品" :value="0"></el-option>
                                    <el-option label="模块" :value="1"></el-option>
                                    <el-option label="类目" :value="2"></el-option>
                                </el-select>
                                <el-select v-model="form.productId" filterable placeholder="请选择商品" @change="onProductIdChanged" v-if="contentType === 0">
                                    <el-option v-for="item in products" :key="item.id" :label="item.title" :value="item.id">
                                    </el-option>
                                </el-select>
                                <el-select v-model="form.subModelId" filterable placeholder="请选择模块" @change="onSubModelIdChanged" v-if="contentType === 1">
                                    <el-option v-for="item in models" :key="item.id" :label="item.title" :value="item.id">
                                    </el-option>
                                </el-select>
                                <el-select v-model="form.categoryId" filterable placeholder="请选择类目" @change="onCategoryIdChanged" v-if="contentType === 2">
                                    <el-option v-for="item in categories" :key="item.id" :label="item.title" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="封面">
                                <el-upload class="avatar-uploader" :on-success="handleCoverSuccess" :http-request='uploadQnFile' list-type='picture' :show-file-list="false">
                                    <img v-if="form.cover" :src="form.cover" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="URL">
                                <el-input v-model="form.url"></el-input>
                            </el-form-item>
                            <el-form-item label="排序">
                                <el-input v-model="form.sort" type="number"></el-input>
                            </el-form-item>
                            <el-form-item label="是否显示">
                                <el-checkbox v-model="form.isShow" :false-label='0' :true-label='1' :checked='form.isShow == 1' border>显示</el-checkbox>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">保存</el-button>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-main>
            </el-container>
        </el-container>
        <#include "/yq/admin/components/footer.html" />
    </div>
    <#include "/yq/admin/components/scripts.html" />
    <#include "/components/qiniu.html" />
    <script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                form: toJson(`${data}`),
                contentType: 0, // 0商品 1模块 2类目
                products: toJson(`${products!'[]'}`),
                models: toJson(`${models!'[]'}`),
                categories: toJson(`${categories!'[]'}`)
            }
        },
        mounted: function() {
            if (this.form.productId) {
                this.contentType = 0;
            } else if (this.form.subModelId) {
                this.contentType = 1;
            } else if (this.form.categoryId) {
                this.contentType = 2;
            }
        },
        methods: {
            onSubmit() {
                if (!this.form.title) {
                    msg("请输入标题");
                    return;
                }
                if (!this.form.productId && !this.form.subModelId && !this.form.categoryId) {
                    msg("请选择模块内容");
                    return;
                }
                var param = {
                    id: this.form.id,
                    modelId: this.form.modelId,
                    productId: this.form.productId,
                    url: this.form.url,
                    cover: this.form.cover,
                    title: this.form.title,
                    subtitle: this.form.subtitle,
                    isShow: this.form.isShow,
                    subModelId: this.form.subModelId,
                    sort: this.form.sort,
                    extra: this.form.extra,
                    categoryId: this.form.categoryId
                }
                // console.log(param)
                var url = ''
                var ref = '${referer!""}'
                var url = '/yq/admin/model/submitModelInfo'
                axiosRequest(param, url, ref)
            },
            onContentTypeChanged(val) {
                this.form.productId = null;
                this.form.subModelId = null;
                this.form.categoryId = null;
                this.form.cover = '';
            },
            onProductIdChanged(val) {
                for (var i = 0; i < this.products.length; i++) {
                    if (this.products[i].id == val) {
                        this.form.cover = this.products[i].cover;
                        break;
                    }
                }
            },
            onSubModelIdChanged(val) {
                for (var i = 0; i < this.models.length; i++) {
                    if (this.models[i].id == val) {
                        this.form.cover = this.models[i].cover;
                        break;
                    }
                }
            },
            onCategoryIdChanged(val) {
                for (var i = 0; i < this.categories.length; i++) {
                    if (this.categories[i].id == val) {
                        this.form.cover = this.categories[i].cover;
                        break;
                    }
                }

            },
            handleCoverSuccess(res, file) {
                this.form.cover = res.data.url
            }
        },
        filters: {
        }
    })
    </script>
    <style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    </style>
</body>

</html>